<template>
  <view class="container">
    <HeadNav title="我的活动" back />
    <view class="tab-bar">
      <uni-segmented-control
        :current="current"
        :values="tabs"
        @clickItem="onClickItem"
        activeColor="#BB9F5E"
        inActiveColor="#fff"
      ></uni-segmented-control>
    </view>
    <view class="tab" v-show="current === 0">
      <scroll-view
        scroll-y
        class="scroll-height"
        @scrolltolower="getActiveData"
      >
        <view class="list-bar">
          <view
            class="list-item"
            @click="onActivityItem(item.id, 1)"
            v-for="item of dataList"
            :key="item.id"
          >
            <view class="list-item-left">
              <image class="product-item-img" :src="item.coverFileUrl"></image>
            </view>
            <view class="list-item-right">
              <view class="list-item-title list-item-text">
                {{ item.activityName }}
              </view>
              <view
                class="list-item-type list-item-text"
                style="margin: 6rpx 0"
              >
                <text class="item-tag">{{ item.activityTypeText }}</text>
                <template v-if="item.activityTags">
                  <text
                    class="item-tag item-tag-blue"
                    v-for="tag of tagsFormat(item.activityTags)"
                    :key="tag"
                    >{{ tag }}</text
                  >
                </template>
              </view>
              <view class="list-item-time list-item-text">
                <view class="item-content-box">
                  <uni-icons type="calendar" size="20"></uni-icons>
                  {{ formatDate(item.startTime, 'YYYY.MM.DD') }}-{{
                    formatDate(item.endTime, 'YYYY.MM.DD')
                  }}
                </view>
              </view>
              <view class="list-item-address list-item-text">
                <view class="item-content-box">
                  <uni-icons type="location" size="20"></uni-icons>
                  {{ item.address }}
                </view>
              </view>
              <view class="list-item-storename list-item-text">
                <view class="item-content-box">
                  <uni-icons type="shop" size="20"></uni-icons>
                  {{ item.storeName }}
                </view>
                <view class="item-price"> ￥{{ item.price }} </view>
              </view>
            </view>
          </view>
        </view>
        <uni-load-more v-if="showLoadMore" :status="pagination.loadingStatus" />
      </scroll-view>
    </view>

    <view class="tab" v-show="current === 1">
      <scroll-view
        scroll-y
        class="scroll-height"
        @scrolltolower="getActiveData2"
      >
        <view class="list-bar">
          <view
            class="list-item"
            @click="onActivityItem(item2.id, 2)"
            v-for="item2 of dataList2"
            :key="item2.id"
          >
            <view class="list-item-left">
              <image class="product-item-img" :src="item2.coverFileUrl"></image>
            </view>
            <view class="list-item-right">
              <view class="list-item-title list-item-text">
                {{ item2.activityName }}
              </view>
              <view
                class="list-item-type list-item-text"
                style="margin: 6rpx 0"
              >
                <text class="item-tag">{{ item2.activityTypeText }}</text>
                <template v-if="item2.activityTags">
                  <text
                    class="item-tag item-tag-blue"
                    v-for="tag of tagsFormat(item2.activityTags)"
                    :key="tag"
                    >{{ tag }}</text
                  >
                </template>
              </view>
              <view class="list-item-time list-item-text">
                <view class="item-content-box">
                  <uni-icons type="calendar" size="20"></uni-icons>
                  {{ formatDate(item2.startTime, 'YYYY.MM.DD') }}-{{
                    formatDate(item2.endTime, 'YYYY.MM.DD')
                  }}
                </view>
              </view>
              <view class="list-item-address list-item-text">
                <view class="item-content-box">
                  <uni-icons type="location" size="20"></uni-icons>
                  {{ item2.address }}
                </view>
              </view>
              <view class="list-item-storename list-item-text">
                <view class="item-content-box">
                  <uni-icons type="shop" size="20"></uni-icons>
                  {{ item2.storeName }}
                </view>
                <view class="item-price"> ￥{{ item2.price }} </view>
              </view>
            </view>
          </view>
        </view>
        <uni-load-more
          v-if="showLoadMore2"
          :status="pagination2.loadingStatus"
        />
      </scroll-view>
    </view>
    <view class="tab" v-show="current === 2">
      <scroll-view
        scroll-y
        class="scroll-height"
        @scrolltolower="getActiveData3"
      >
        <view class="list-bar">
          <view
            class="list-item"
            @click="onActivityItem(item3.id, 3)"
            v-for="item3 of dataList3"
            :key="item3.id"
          >
            <view class="list-item-left">
              <image class="product-item-img" :src="item3.coverFileUrl"></image>
            </view>
            <view class="list-item-right">
              <view class="list-item-title list-item-text">
                {{ item3.activityName }}
              </view>
              <view
                class="list-item-type list-item-text"
                style="margin: 6rpx 0"
              >
                <text class="item-tag">{{ item3.activityTypeText }}</text>
                <template v-if="item3.activityTags">
                  <text
                    class="item-tag item-tag-blue"
                    v-for="tag of tagsFormat(item3.activityTags)"
                    :key="tag"
                    >{{ tag }}</text
                  >
                </template>
              </view>
              <view class="list-item-time list-item-text">
                <view class="item-content-box">
                  <uni-icons type="calendar" size="20"></uni-icons>
                  {{ formatDate(item3.startTime, 'YYYY.MM.DD') }}-{{
                    formatDate(item3.endTime, 'YYYY.MM.DD')
                  }}
                </view>
              </view>
              <view class="list-item-address list-item-text">
                <view class="item-content-box">
                  <uni-icons type="location" size="20"></uni-icons>
                  {{ item3.address }}
                </view>
              </view>
              <view class="list-item-storename list-item-text">
                <view class="item-content-box">
                  <uni-icons type="shop" size="20"></uni-icons>
                  {{ item3.storeName }}
                </view>
                <view class="item-price"> ￥{{ item3.price }} </view>
              </view>
            </view>
          </view>
        </view>
        <uni-load-more
          v-if="showLoadMore3"
          :status="pagination3.loadingStatus"
        />
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { myActivitysApi } from '@/api/activity'
import { formatDate } from '@/utils/formatTime'
import HeadNav from '@/components/HeadNav'
const tabs = ref(['进行中', '已报名', '已结束'])
const current = ref(0)
const pagination = reactive({
  page: 0,
  size: 10,
  stage: 1,
  loadingStatus: '',
  pageLimit: false
})
const pagination2 = reactive({
  page: 0,
  size: 10,
  stage: 2,
  loadingStatus: '',
  pageLimit: false
})
const pagination3 = reactive({
  page: 0,
  size: 10,
  stage: 3,
  loadingStatus: '',
  pageLimit: false
})
const showLoadMore = ref(true)
const showLoadMore2 = ref(true)
const showLoadMore3 = ref(true)
const dataList = ref([])
const dataList2 = ref([])
const dataList3 = ref([])
onLoad(() => {
  getActiveData()
  getActiveData3()
})
onShow(() => {
  clarParams2()
  getActiveData2()
})
const clarParams2 = () => {
  pagination2.page = 0
  pagination2.pageLimit = false
  dataList2.value = []
}

const tagsFormat = tags => {
  return tags.split('|').filter(part => part && part.trim().length > 0)
}

const getActiveData = async () => {
  if (pagination.pageLimit) return
  pagination.page++

  const params = {
    pageNum: pagination.page,
    pageSize: pagination.size,
    stage: pagination.stage
  }

  // if (pagination.keywords) params.packName = pagination.keywords

  showLoadMore.value = true
  pagination.loadingStatus = 'loading'
  pagination.pageLimit = true

  try {
    const res = await myActivitysApi(params)
    dataList.value = dataList.value.concat(res.rows)

    if (dataList.value.length === 0) {
      // 查不到数据
      pagination.pageLimit = true
      pagination.loadingStatus = 'noMore'
    } else if (pagination.page * pagination.size >= res.total) {
      pagination.pageLimit = true
      showLoadMore.value = false
    } else {
      pagination.loadingStatus = 'more'
      pagination.pageLimit = false
    }
  } catch (error) {
    console.log(error)
    pagination.pageLimit = false
    uni.showToast({
      title: '查询活动数据失败，请稍后再试',
      icon: 'error'
    })
  }
}

const getActiveData2 = async () => {
  if (pagination2.pageLimit) return
  pagination2.page++

  const params = {
    pageNum: pagination2.page,
    pageSize: pagination2.size,
    stage: pagination2.stage
  }

  // if (pagination.keywords) params.packName = pagination.keywords

  showLoadMore2.value = true
  pagination2.loadingStatus = 'loading'
  pagination2.pageLimit = true

  try {
    const res = await myActivitysApi(params)
    dataList2.value = dataList2.value.concat(res.rows)

    if (dataList2.value.length === 0) {
      // 查不到数据
      pagination2.pageLimit = true
      pagination2.loadingStatus = 'noMore'
    } else if (pagination2.page * pagination2.size >= res.total) {
      pagination2.pageLimit = true
      showLoadMore2.value = false
    } else {
      pagination2.loadingStatus = 'more'
      pagination2.pageLimit = false
    }
  } catch (error) {
    console.log(error)
    pagination2.pageLimit = false
  }
}

const getActiveData3 = async () => {
  if (pagination3.pageLimit) return
  pagination3.page++

  const params = {
    pageNum: pagination3.page,
    pageSize: pagination3.size,
    stage: pagination3.stage
  }

  // if (pagination.keywords) params.packName = pagination.keywords

  showLoadMore3.value = true
  pagination3.loadingStatus = 'loading'
  pagination3.pageLimit = true

  try {
    const res = await myActivitysApi(params)
    dataList3.value = dataList3.value.concat(res.rows)

    if (dataList3.value.length === 0) {
      // 查不到数据
      pagination3.pageLimit = true
      pagination3.loadingStatus = 'noMore'
    } else if (pagination3.page * pagination3.size >= res.total) {
      pagination3.pageLimit = true
      showLoadMore3.value = false
    } else {
      pagination3.loadingStatus = 'more'
      pagination3.pageLimit = false
    }
  } catch (error) {
    console.log(error)
    pagination3.pageLimit = false
  }
}

const onActivityItem = (id, stage) => {
  uni.navigateTo({
    url: `/pages/my/my-activedetail?id=${id}&stage=${stage}`
  })
}

const onClickItem = e => {
  if (current.value != e.currentIndex) {
    current.value = e.currentIndex
  }
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #ebebeb;
  padding-bottom: env(safe-area-inset-bottom);
  height: 100vh;
  box-sizing: border-box;
}

.tab-bar {
  // padding: 12rpx 0 24rpx 0;
  padding-bottom: 24rpx;
}

.scroll-height {
  //   max-height: calc(100vh - 100rpx - env(safe-area-inset-bottom));
  height: 80vh;
}

.list-bar {
  padding: 0 24rpx;
  box-sizing: border-box;

  .list-item {
    display: flex;
    font-family: PingFangSC-Regular, sans-serif;
    margin-bottom: 30rpx;
    background-color: #fff;
    padding: 12rpx;
    padding-left: 24rpx;
    position: relative;
    border: 12rpx solid #eae9e6;
    border-left: 0;
    border-radius: 12rpx;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background-image: url('https://ucp-tcg.com:18001/mc/app/static/listbg-r.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    &::before {
      content: '';
      position: absolute;
      top: -12rpx;
      left: 0;
      width: 12rpx;
      height: calc(100% + 24rpx);
      background-color: #d0ccc2;
    }

    .list-item-left {
      width: 36%;
      height: 240rpx;
      background-image: url('https://ucp-tcg.com:18001/mc/app/static/listbg-l.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 16rpx;

      image {
        width: 85%;
        height: 100%;
      }

      // .product-item-img.no-image {
      //   width: 100%;
      //   height: 100%;
      //   background-color: $no-image-color;
      // }
    }

    .list-item-right {
      flex: 1;
      border: 2rpx solid #f9f7f4;
      border-left: 0;

      .list-item-text {
        line-height: 44rpx;
        font-size: 28rpx;
        // margin-bottom: 16rpx;
      }

      .list-item-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #bda364;
      }

      .item-tag {
        display: inline-block;
        background-color: #d16a5a;
        color: #fff;
        padding: 4rpx 8rpx;
        margin-right: 10rpx;
        max-width: 180rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        &.item-tag-blue {
          background-color: #3a78ae;
        }
      }

      .item-content-box {
        display: flex;
        align-items: center;
        gap: 8rpx;
      }

      .list-item-storename {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .item-price {
        font-size: 24rpx;
        color: #cbb06f;
      }
    }
  }
}
</style>
